<template>
  <div class="login_page">
       <Card :padding="20"  style="width:400px" class="car">
           <router-link to="/">
           <img src="https://happychuan.oss-cn-shenzhen.aliyuncs.com/web/logo.png" alt="logo" class="logo-img">
           </router-link>
            <Divider />
             <Form ref="formValidate"  label-position="top" :model="formValidate" :rules="ruleValidate">
                <FormItem label="电子邮箱" prop="email">
                    <Input  prefix="ios-mail-outline" v-model="formValidate.email" />
                </FormItem>
                <FormItem label="密码"  prop="password">
                    <Input   prefix="ios-lock-outline"  type="password" v-model="formValidate.password" />
                </FormItem>
             <Button type="success" long @click="handleSubmit('formValidate')">Submit</Button>
            </Form>
            <p class="reg">尚未拥有账户？<a href="/register">注册</a></p>
       </Card>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
    data(){
          return {
                formValidate: {
                    password: '',
                    email: '',
                  
                },
                ruleValidate: {
                    password: [
                        { required: true, message: 'The password cannot be empty', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                    ],
               }
        }
    },
     methods: {
         ...mapMutations(['changeLogin','changeName','changeAdmin','changeAvatar']),
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var that = this
                        this.$axios.post('/api/manage/login',this.formValidate).then(function(res){
                           if(res.data.err_code == 2){
                               that.$Message.error('该用户不存在！');
                           }else if(res.data.err_code == 1){
                                that.$Message.error('密码错误！');
                           }else if(res.data.err_code == 0){
                               that.$Message.success('登陆成功')
                               that.changeLogin({ Authorization: res.data.token})
                               that.changeName({Name:res.data.data.name})
                               that.changeAdmin({isAdmin:res.data.data.isAdmin})
                               that.changeAvatar({Avatar:res.data.data.avatar})
                               that.$router.push('/admin')
                           }else{
                                that.$Message.error('登陆失败！')
                           }
                        
                        })
                        
                    } else {
                        this.$Message.error('请正确填写登陆信息！');
                    }
                })
            }
        
        },
        mounted(){
            // if(this.$store.state.Authorization){
            //     this.$router.push('/admin')
            //     this.$Message.success('已自动登陆')
            // }
        }
}
</script>

<style scoped>
    .car{
        margin: 100px auto;
    }
    .logo-img{
        width: 360px
    }
    .reg{
        margin: 10px 0;
        text-align: center
    }
</style>